<template>
	<uv-popup ref="popup" bgColor="none" mode="bottom" zIndex="2581" @change="funInit" :overlayOpacity="0.4"
		:overflow="false" :safeAreaInsetBottom="false">
		<view class="foot-bottom" :class="{'foot-bottom-input':funPop == 'input'}" :style="'bottom:'+top+'px'">
			<view class="input-box">
				<view class="foot-input">
					<input @blur="blurChanginput" @focus="inputFocus" confirm-hold @confirm="onReply"
						@input="changinput" v-model="inputText" :adjust-position="false" confirm-type="send"
						maxlength="-1" :placeholder="placeholder"
						placeholder-style="font-size: 28rpx;font-weight: 400;color: #999B9B;" :focus="isInputFocus"
						class="input-left"></input>
					<text @tap="tapEmoji" class="dy-iconfont icon-xingzhuangjiehebeifen"></text>
				</view>
			</view>
			<!-- 表情 -->
			<view class="emoji">
				<view class="flex">
					<scroll-view :show-scrollbar="false" scroll-y class="emoji-scroll-view"
						:class="{'TUI-Emoji-show':funPop == 'emoji'}">
						<view class="TUI-Emoji">
							<view v-for="(item, index) in emojiList" :key="index" class="TUI-emoji-image">
								<text :data-name="item.url" class="emoji-image"
									@tap="handleEnterEmoji">{{item.url}}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</uv-popup>
</template>
<script>
	// import TUIEmoji from '@/page_chat/chat/components/message-elements/emoji/index.vue';
	import {
		emojiName,
		emojiUrl,
		emojiMap
	} from '@/utils/emojiMap';
	const app = getApp();
	export default {
		components: {
			// TUIEmoji
		},
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		props: {
			placeholder: {
				type: [String, Number],
				default: '说点什么...'
			},
		},
		data() {
			return {
				funPop: '',
				inputText: '',
				top: 0,
				emojiList: [],
				systemInfo: app.globalData.systemInfo,
				isInputFocus: false,
			}
		},
		mounted() {
			for (let i = 0; i < emojiName.length; i++) {
				this.emojiList.push({
					emojiName: emojiName[i],
					url: emojiMap[emojiName[i]]
				})
			}
		},
		methods: {
			// 表情
			handleEnterEmoji(event) {
				this.inputText = this.inputText + event.currentTarget.dataset.name
				this.$emit('changinput', this.inputText)
			},
			tapEmoji() {
				this.top = 0
				if (this.funPop == 'emoji') {
					// this.$refs.popup.close();
					this.funPop = ''
				} else {
					this.$refs.popup.open();
					this.funPop = 'emoji'
				}
			},
			tapInput() {
				this.$nextTick(() => {
					this.$refs.popup.open();
					setTimeout(() => {
						this.isInputFocus = true;
					}, 500)
				})
			},
			funInit(e) {
				if (!e.show) {
					this.funPop = ''
					this.$emit('footInputClose')
				} else {}
			},
			// 输入框
			changinput(e) {
				this.$emit('changinput', this.inputText)
			},
			inputFocus(e) {
				this.funPop = 'input'
				this.top = e.detail.height
			},
			blurChanginput(e) {
				this.isInputFocus = false;
				this.top = 0
			},
			close() {
				this.$refs.popup.close();
			},
			//文本内容审核  1 资料；2 评论；3 论坛；
			checkMessage(messageContent, scene) {
				return new Promise((resolve, reject) => {
					app._post_form(
						"/client/input-check/check-message", {
							messageContent: messageContent,
							scene: scene
						},
						(result) => {
							let res = result.data
							resolve(res);
						}, null, () => {
							resolve(false);
						}
					);
				});
			},

			async onReply(item, index) {
				let that = this
				const check_message = await that.checkMessage(that.inputText, 1)
				this.$emit('onReply',check_message)
			},
			changinputSec(e) {
				this.$refs.popup.close();
				this.inputText = ''
			},
			getMore(id, index, total) {
				this.$emit('getMore', {
					id,
					index,
					total
				})
			},
			closeMore(index) {
				this.$emit('closeMore', index)
			}
		}

	}
</script>
<style lang="scss" scoped>
	.foot-bottom {
		transition: bottom 100ms ease-out 0ms, -webkit-transform 100ms ease-out 0ms, transform 100ms ease-out 0ms;
		// transform-origin: 50% 50%;

		&.foot-bottom-input {
			position: absolute;
		}
	}


	.input-box {
		box-sizing: border-box;
		padding: 34rpx 36rpx;
		background: #FFFFFF;

		.foot-input {
			box-sizing: border-box;
			padding: 12rpx 36rpx;
			width: 100%;
			height: 64rpx;
			background: #F6F8F7;
			border-radius: 39rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #282D2D;
			line-height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.input-text,
			.input-left {
				flex: 1;
			}

			.icon-xingzhuangjiehebeifen {
				color: #282D2D;
				font-size: 40rpx;
				padding-left: 30rpx;
			}
		}
	}

	.emoji {
		background: #F6F8F7;

		.flex {
			flex: 1
		}

		.emoji-scroll-view {
			transition: height 300ms ease-out 0ms, -webkit-transform 300ms ease-out 0ms, transform 300ms ease-out 0ms;
			height: 0;

			&.TUI-Emoji-show {
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
				height: 480rpx;
			}
		}

		.TUI-Emoji {
			// width: 100%;
			@include flex(row);
			justify-content: flex-start;
			flex-wrap: wrap;
			// transform-origin: 50% 50%;
			padding: 20rpx 20rpx 0;
		}

		.TUI-emoji-image {
			width: calc((100% - 160rpx) / 8);
			height: 68.5rpx;
			margin: 10rpx;
			text-align: center;
		}

		.emoji-image {
			width: 68.5rpx;
			height: 68.5rpx;
			font-size: 50rpx;
			text-align: center;
		}
	}
</style>